<template>
    <div class="demo-date-picker">
        <!-- 日期选择，请假类型，请假状态 -->
    <div class="block">
      <span class="demonstration">选择日期：</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
      <span class="demonstration">请假类型：</span>
      <el-select v-model="value2" class="m-1" placeholder="Select">
    <el-option
      v-for="item in options_type"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    </el-select>
    <span class="demonstration">请假状态：</span>
    <el-select v-model="value3" class="m-2" placeholder="Select">
    <el-option
      v-for="item in options_status"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    </el-select>
    <el-button type="primary">查询</el-button>
    <el-button plain @click="reset()">重置</el-button>
    </div>
    </div>
    <!-- 请假按钮 -->
    <div class="leave">
        <el-button type="primary" @click="router.push('/index/family-schoolInteraction/StudentLeaveListform')">请假</el-button>
        <!-- <el-button text @click="dialogFormVisible = true">请假</el-button> -->

    </div>
    <!-- 请假表格 -->
    <el-table :data="$store.leavelist.list" stripe style="width: 100%">
        
        <el-table-column  label="序号" width="100" type="index"/>
        <el-table-column prop="name" label="请假学生" width="100" />
        <el-table-column prop="grade" label="年级班级" />
        <el-table-column prop="leavetype" label="请假类型" />
        <el-table-column prop="leavetime" label="请假时间" />
        <el-table-column prop="leavereason" label="请假事由" />
        <el-table-column prop="promoter" label="发起人" />
        <el-table-column prop="leavestatus" label="请假状态" />
        <el-table-column prop="name" label="操作" >
            <template #default="scope">
                <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)" @click="router.push('/index/family-schoolInteraction/LeaveListformcheck')">查看</el-button>
                <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)" v-show="dian(scope.row)">撤销</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { onMounted, ref ,reactive} from 'vue'
import {leave_list} from '../../../utils/api'
import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
import {useStudentsleaveStore} from '../../../stores/Family-schoolInteractiongll/Studentsleave'
import { useRouter } from 'vue-router'
var $store = useStudentsleaveStore()
//获取数据仓库
// console.log($store)
// 获取路由对象
var router = useRouter()
onMounted(()=>{
  $store.leave_List();
  // listData.value = $store.leavelist;
})

// 日期选择器
const value1 = ref('')
// 下拉框
const value2 = ref('')
const value3 = ref('')

// 日期选择定义
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
// 下拉框选择类型
const options_type = [
  {
    value: 'Option1',
    label: '事假',
  },
  {
    value: 'Option2',
    label: '病假',
  },
]
const options_status = [
  {
    value: 'Option1',
    label: '待审核',
  },
  {
    value: 'Option2',
    label: '已通过',
  },
]
// 获取学生请假列表
var deleteRow = (row)=>{
    // console.log(row.id);
    $store.leaveList_delete(row.id)
}
var editRow = (row)=>{
    // console.log(row.id);
    $store.leaveList_check(row.id);
}
// const indexMethod = (index)=>{
//     return index + 1;
// }
var listData = ref([])
var reset = ()=>{

}
var dian = (row)=>{
  console.log(row.leavestatus)
  return row.leavestatus == '待审核'
}

</script>

<style scoped>
.demo-date-picker {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.demo-date-picker .block {
  /* padding: 30px 0; */
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  flex: 1;
  width: 0;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-around;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-range-editor.el-input__inner {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    /* margin: 0 50px; */
}
.el-date-picker{
    width: 300px;
    margin: 0 50px;

    /* margin: 0 20px; */
}
.el-button{
    margin: 0 5px;
}
.leave{
    display: flex;
    justify-content: flex-end;
    margin: 5px 10px;
}
.teacher{
    height: 60px;
    line-height: 50px;
    margin:10px 0 20px 50px;
}
.checkleave{
    margin-left: 20px;
    font-size: 17px;
}
</style>